<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-web-terminal design</title>
    <style>
        #logo {
            margin: 100px;
            overflow: hidden;
            padding: 15px;
            width: 200px;
            height: 200px;
            background-color: #35495e;
            border-radius: 15px;
            //box-shadow: 0 0 15px rgba(0,0,0,.5);
            position: relative;
            filter: drop-shadow(0 0 5px #000);
        }
        .vue-icon {
            width: 100px;
            position: absolute;
            left: 20px;
            top: 50px;
            transform: rotate(-90deg);
            z-index: 2;
        }
        .line {
            position: absolute;
            bottom: 50px;
            right: 30px;
            width: 85px;
            height: 18px;
            background-color: #41b883;
            z-index: 2;
        }
        .shadow {
            position: absolute;
            background: #0000002b;
            z-index: 1;
            width: 243px;
            height: 74px;
            transform: rotate(30deg);
            top: 135px;
            left: 29px;
        }
    </style>
</head>
<body>
    <button onclick="download()">生成图片</button>
    <div id="logo">
        <img src="vue.png" alt="vue-icon" class="vue-icon">

        <!--        <svg width="100px" height="100px" class="vue-icon" viewBox="0 -17.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">-->
        <!--            <g>-->
        <!--                <path d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z" fill="#41B883"></path>-->
        <!--                <path d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z" fill="#41B883"></path>-->
        <!--                <path d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z" fill="#35495E"></path>-->
        <!--            </g>-->
        <!--        </svg>-->

        <span class="line"></span>
        <span class="shadow"></span>
    </div>
</body>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
    function download() {
        const node = document.getElementById("logo")
        html2canvas(node, {
            useCORS: true,
            allowTaint: true,
            height: node.offsetHeight,
            width: node.offsetWidth,
            scrollY: 0,
            scrollX: 0,
            backgroundColor: null
        }).then(async (canvas) => {

            canvas.shadowOffsetX = 0;
            canvas.shadowOffsetY = 0;
            canvas.shadowBlur = 15;
            canvas.shadowColor = "rgba(0,0,0,0.5)"

            let imgUrl = canvas.toDataURL();
            let img = new Image();
            img.src = imgUrl;  // 导出图片
            document.body.appendChild(img);  // 将生成的图片添加到body
        })
    }
</script>
</html>